<template>
  <div>
    <div id="calendar"></div>
    <div class="do">
      <div class="doin" @click="toCheck">打卡</div>
    </div>
    <div class="list">
      <ul style="list-style: disc">
        <li>请点击打卡按钮打卡</li>
        <li>仅限当日打卡，过时不补</li>
      </ul>
    </div>
  </div>
</template>

<script>
import {Calendar} from '@/utils/calendar'
import api from '@/api'
export default {
  name: 'check',
  data () {
    return {
      calendar: null,
      hook: require('@/assets/img/icon-hook.png'),
      star: require('@/assets/img/icon-star.png'),
      user: {}
    }
  },
  methods: {
    toCheck () {
      api.studentCheck({
        params: {student_id: this.user.id},
        callback: res => {
          if (res.data.error_code === 0) {
            this.$toast({
              message: res.data.message,
              duration: 1000,
              onClose: this.getCheckList
            })
          } else {
            this.$toast(res.data.message)
          }
        }
      })
    },

    getCheckList () {
      api.getStudentCheckIn({
        params: {student_id: this.user.id},
        callback: res => {
          if (res.data.error_code === 0) {
            let db = []
            let starDB = []
            res.data.data.forEach(item => {
              let day = new Date(Number(item.time) * 1000).getDate()
              if (item.status === 1 && starDB.indexOf(day) === -1) {
                starDB.push(day)
              } else if (db.indexOf(day) === -1) {
                db.push(day)
              }
            })
            this.calendar.createCalendar((item, html) => {
              if (db.indexOf(item.day) !== -1) {
                html.innerHTML += `<img src="${this.hook}" width="36">`
              } else if (starDB.indexOf(item.day) !== -1) {
                html.innerHTML += `<img src="${this.star}" width="36" class="star">`
              }
            })
          }
        }
      })
    }
  },
  mounted () {
    this.calendar = new Calendar({
      dom: document.getElementById('calendar'),
      fn: function () {},
      start: 0
    })
    this.calendar.createCalendar()
    this.getCheckList()
  },
  created () {
    this.user = JSON.parse(sessionStorage.getItem('user'))
  }
}
</script>

<style scoped>
  .doin {
    width: 72px;
    height: 72px;
    background: rgba(58, 127, 226, 1);
    border-radius: 50%;
    text-align: center;
    line-height: 72px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #fff;
  }
  .do{
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(58, 127, 226, 1);
    margin: 50px auto;
  }
  .list{
    position: fixed;
    bottom: 0;
    padding: 20px 20px 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    color: #666;
    font-size: 12px;
  }
  .list li{
    line-height: 24px;
  }
</style>
